<template>
  <div class="filter">
    <div class="filter-item">
      <label for="">教练：</label>
      <Select v-model="coachId" style="width: 100px" clearable>
        <Option
          v-for="item in coachList"
          :value="item.coachId"
          :key="item.coachId"
          :tag="item.coachId"
          >{{ item.coachName }}</Option
        >
      </Select>
    </div>
    <div class="filter-item">
      <label for="">时间范围：</label>
      <DatePicker
        type="daterange"
        placement="bottom-end"
        style="width: 200px"
        @on-change="dateChange"
      ></DatePicker>
    </div>
    <div class="filter-item">
      <label for="">默认课程状态：以上课程</label>
    </div>
    <div class="filter-item">
      <Button type="info" @click="initData">查询</Button>
    </div>
    <div class="filter-item">
      <Button type="success" @click="exportFile">导出</Button>
    </div>
    <div class="filter-item">
      <div class="table">
        <Table
          border
          :columns="usedLessonColumns"
          :data="usedLessonData"
          width="1500"
        ></Table>
      </div>
      <div class="page">
        <Page :total="total" show-elevator show-total @on-change="pageChange" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      usedLessonColumns: [
        {
          type: "index",
          title: "序号",
          width: 150,
        },
        {
          title: "教练名",
          key: "coachName",
          align: "center",
          width: 150,
        },
        {
          title: "会员名",
          key: "vipName",
          align: "center",
          width: 200,
        },
        {
          title: "课名",
          key: "courseName",
          align: "center",
          width: 200,
        },
        {
          title: "价格",
          key: "coursePrice",
          align: "center",
          width: 200,
        },
        {
          title: "添加时间",
          key: "creationDate",
          align: "center",
          width: 200,
        },
        {
          title: "上课时间",
          key: "useDate",
          align: "center",
          width: 200,
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  props: {
                    type: "info",
                  },
                },
                params.row.status == 0 ? "待上课" : "已上课"
              ),
            ]);
          },
        },
      ],
      usedLessonData: [],
      total: 0,
      pageNo: 1,
      dateList: [],
      coachId: 0,
    };
  },
  computed: {
    coachList() {
      return this.$store.getters.coachList;
    },
  },
  methods: {
    initData() {
      this.pageNo = 1;
      this.getUsedLesson();
    },
    pageChange(e) {
      this.pageNo = e;
      this.getUsedLesson();
    },
    dateChange(e) {
      this.dateList = e;
    },
    getUsedLesson() {
      console.log(this.coachId);
      if (this.coachId == -1) {
        this.$Message.error("请选择教练！");
        return false;
      } else {
        axios
          .post("/api/gym/course/getUsedCourse", {
            pageNo: this.pageNo,
            coachId: this.coachId,
            beginDate: this.dateList[0] ? this.dateList[0] : "",
            endDate: this.dateList[0] ? this.dateList[1] : "",
          })
          .then((res) => {
            if (res.data.status == 200) {
              this.usedLessonData = res.data.data.records;
              this.total = res.data.data.total;
            }
          });
      }
    },
    exportFile() {
      axios
        .post(
          "/api/gym/course/exportUsedCourse",
          {
            pageNo: this.pageNo,
            coachId: this.coachId,
            beginDate: this.dateList[0] ? this.dateList[0] : "",
            endDate: this.dateList[0] ? this.dateList[1] : "",
            responseType: "blob",
          },
          {
            responseType: "blob",
          }
        )
        .then((res) => {
          console.log(res)
          var fileURL = window.URL.createObjectURL(new Blob([res.data]));
          var fileLink = document.createElement("a");
          fileLink.href = fileURL;
          fileLink.setAttribute("download", `已上课程数据汇总.xlsx`);
          document.body.appendChild(fileLink);
          fileLink.click();
        });
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
}
.table {
  margin-top: 20px;
  text-align: center;
  align-items: center;
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>